<div
  th:each="article,iterStat : ${data.rows}"
  class="group w-full max-xl:grid grid-cols-6 gap-4 text-black dark:text-white inline-flex rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900 px-4 pt-4 pb-2 mb-2"
>
  <div
    class="col-start-5 col-span-3 max-xl:col-start-1 max-xl:col-end-7 rounded-lg overflow-hidden"
    th:with="imgs=${@commonTag.split(article.articleImg==null?'':article.articleImg)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/static/nice/images/thumbs/}"
  >
    <img
      class="max-xl:h-full h-60 w-96 max-xl:w-full rounded-lg transition ease-in-out delay-150 group-hover:scale-110 duration-300"
      src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
      th:alt="${article.articleTitle}"
      th:src="${(imgs==null)?iul+rando+'.jpg':imgs[0]}"
    />
  </div>
  <div class="col-start-1 col-end-5 max-xl:col-start-1 max-xl:col-end-7">
    <div class="card-list-body text-wrap">
      <a href="blog-read.html" class="visited:text-purple-600">
        <h3
          class="text-xl dark:text-white font-semibold text-slate-900"
          th:text="${article.articleTitle}"
        >
          Top amazing web demos and experiments in 2024 should know about
        </h3>
      </a>
      <p
        class="card-list-text text-gray-500 dark:text-gray-400"
        th:text="${article.articleSummary}"
      >
        consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
        laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
        veniam,
      </p>
    </div>
    <div class="flex items-center gap-3" th:with="user=${article.createUser}">
      <a href="timeline.html">
        <img
          rh:src="${user.avatar}"
          th:alt="${user.nickName}"
          class="bg-gray-200 rounded-full w-10 h-10"
        />
      </a>
      <div class="flex-1">
        <a href="javaScript:void(0)">
          <h4
            class="font-semibold text-sm text-black dark:text-white"
            th:text="${user.nickName}"
          >
            Johnson smith
          </h4>
        </a>
        <div class="mt-0.5 hidden" th:text="${user.remark}">
          Suggested For You
        </div>
      </div>
      <button
        type="button"
        class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery hidden"
      >
        Follow
      </button>
    </div>
    <div
      class="flex justify-start text-xs mt-2 mb-2"
      th:with="articleCount=${article.articleCount}"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-4 h-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"></path>
      </svg>
      <span th:data-time="${article.createTime}"  class="show-create-time mx-2"
        >27天前</span
      >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-4 h-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"
        ></path>
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
      </svg>
      <span th:data-count="${articleCount.articleLook}" th:text="${articleCount.articleLook}"  class="show-k mx-2"> 156.9k</span>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-4 h-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
        ></path>
      </svg>
      <span  th:data-count="${articleCount.articleLike}" th:text="${articleCount.articleLike}"  class="show-k mx-2"> 156.9K</span>

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke-width="1.5"
        stroke="currentColor"
        class="w-4 h-4"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
        ></path>
      </svg>
      <span  th:data-count="${articleCount.articleDiscuss}" th:text="${articleCount.articleDiscuss}"  class="show-k mx-2"> 156.9K</span>
    </div>

    <div class="grid grid-rows-1">
      <div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 inline"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9.568 3H5.25A2.25 2.25 0 0 0 3 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 0 0 5.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 0 0 9.568 3Z"
          ></path>
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 6h.008v.008H6V6Z"></path>
        </svg>
        <span
          class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
          >Dark</span
        >
      </div>
      <div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="w-4 h-4 inline"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M15 13.5H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
          ></path>
        </svg>
        <span
          class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
          >Red</span
        >
        <span
          class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
          >Green</span
        >
      </div>
    </div>
  </div>
</div>

<script>
  function formatRelativeTime(publishTimestamp) {
    const currentTime = new Date();
    const publishDate = new Date(publishTimestamp);
    const timeDifference = currentTime - publishDate;

    // 转换为分钟
    const minutesAgo = Math.floor(timeDifference / (1000 * 60));
    // 转换为小时
    const hoursAgo = Math.floor(minutesAgo / 60);
    // 转换为天数
    const daysAgo = Math.floor(hoursAgo / 24);
    // 转换为月数（简单估计，实际月份天数不一）
    const monthsAgo = Math.floor(daysAgo / 30);
    // 转换为年数（同样为简单估计）
    const yearsAgo = Math.floor(monthsAgo / 12);

    if (minutesAgo < 1) {
      return "刚刚";
    } else if (minutesAgo < 60) {
      return `${minutesAgo}分钟前`;
    } else if (hoursAgo < 24) {
      return `${hoursAgo}小时前`;
    } else if (daysAgo < 30) {
      return `${daysAgo}天前`;
    } else if (monthsAgo < 12) {
      return `${monthsAgo}个月前`;
    } else {
      return `${yearsAgo}年前`;
    }
  }
  
  // 转换为K
  function convertToK(readCount) {
    if (readCount >= 1000) {
      return (readCount / 1000).toFixed(1) + "K";
    } else {
      return readCount.toString();
    }
  }

    const createTimeDom = document.querySelectorAll(".show-create-time");
    const showKdom = document.querySelectorAll(".show-k");
    createTimeDom.forEach((item) => {
      if (item.dataset.time) {
        item.innerHTML = formatRelativeTime(new Date(item.dataset.time).getTime()); // 假设这是文章的发布时间戳
      } else {
      }
    });
    showKdom.forEach((item) => {
      if (item.dataset.count) {
        item.innerHTML = convertToK(item.dataset.count);
      } else {
      }
    });
</script>
